<template>
  <tv-tailwind>
    <div class="pb-10 border-b border-gray-200 mb-10">
      <div class="flex items-center">
        <h1 class="text-3xl font-extrabold text-gray-900 tracking-tight">
          <font style="vertical-align: inherit"
            ><font style="vertical-align: inherit">与预处理器一起使用</font></font
          >
        </h1>
      </div>
      <p class="mt-1 text-lg text-gray-500">
        <font style="vertical-align: inherit"
          ><font style="vertical-align: inherit"
            >将Tailwind与常见的CSS预处理程序（如Sass，Less和Stylus）一起使用的指南。</font
          ></font
        >
      </p>
    </div>
    <v3-viewer @inited="handleViewerInit" :images="imgs" class="viewer" ref="viewer">
      <!-- @ts-ignore -->
      <template v-slot:default="slotProps">
        <img
          v-for="(item, index) in slotProps.images"
          :data-source="item.source"
          :alt="item.source"
          :src="item.src"
          :key="'' + index"
        />
        {{ slotProps.options }}
      </template>
    </v3-viewer>
    <div>
      <div class="prose">
        <p>
          <font style="vertical-align: inherit"
            ><font style="vertical-align: inherit"
              >由于Tailwind是PostCSS插件，因此没有什么可以阻止您将其与Sass，Less，Stylus或其他预处理器一起使用，就像您与其他PostCSS插件（如</font
            ></font
          ><a href="https://github.com/postcss/autoprefixer"
            ><font style="vertical-align: inherit"
              ><font style="vertical-align: inherit">Autoprefixer）</font></font
            ></a
          ><font style="vertical-align: inherit"
            ><font style="vertical-align: inherit">一样</font
            ><font style="vertical-align: inherit">。</font></font
          >
        </p>
        <p>
          <font style="vertical-align: inherit"
            ><font style="vertical-align: inherit">重要的是要注意，</font></font
          ><strong
            ><font style="vertical-align: inherit"
              ><font style="vertical-align: inherit"
                >您不需要在Tailwind中使用预处理器</font
              ></font
            ></strong
          ><font style="vertical-align: inherit"
            ><font style="vertical-align: inherit"
              >-无论如何，您通常在Tailwind项目上编写很少的CSS，因此使用预处理器并不像在编写大量代码的项目中那样有益自定义CSS。</font
            ></font
          >
        </p>
        <p>
          <font style="vertical-align: inherit"
            ><font style="vertical-align: inherit"
              >本指南仅作为出于某些原因而需要或希望将Tailwind与预处理器集成的人员的参考。</font
            ></font
          >
        </p>
        <hr />

        <p>
          <font style="vertical-align: inherit"
            ><font style="vertical-align: inherit"
              >要使用它，请通过npm安装插件：</font
            ></font
          >
        </p>
        <div class="my-6 rounded-xl overflow-hidden bg-gray-800">
          <pre
            class="language-shell"
          ><code class="language-shell"><span class="token comment"># npm</span>
<span class="token function">npm</span> <span class="token function">install</span> postcss-import<font></font>
<font></font>
<span class="token comment"># yarn</span>
<span class="token function">yarn</span> <span class="token function">add</span> postcss-import</code></pre>
        </div>
      </div>

      <p class="flex items-start mt-8 mb-4 space-x-2">
        <svg class="w-6 h-6 flex-none mt-0.5" fill="none">
          <circle cx="12" cy="12" r="12" fill="#FECDD3"></circle>
          <path d="M8 8l8 8M16 8l-8 8" stroke="#B91C1C" stroke-width="2"></path></svg
        ><strong class="text-base leading-7 font-semibold text-gray-900"
          ><font style="vertical-align: inherit"
            ><font style="vertical-align: inherit"
              >无效，必须先使用@import语句</font
            ></font
          ></strong
        >
      </p>
      <div class="prose"></div>
      <p class="flex items-start mt-8 mb-4 space-x-2">
        <svg class="w-6 h-6 flex-none mt-0.5" fill="none">
          <circle cx="12" cy="12" r="12" fill="#A7F3D0"></circle>
          <path d="M18 8l-8 8-4-4" stroke="#047857" stroke-width="2"></path></svg
        ><strong class="text-base leading-7 font-semibold text-gray-900"
          ><font style="vertical-align: inherit"
            ><font style="vertical-align: inherit"
              >使用单独的文件导入和实际CSS</font
            ></font
          ></strong
        >
      </p>
      <div class="prose"></div>
    </div>

    <hr class="border-gray-200 mt-10 mb-4" />
    <div class="flex leading-6 font-medium">
      <a
        class="flex mr-8 transition-colors duration-200 hover:text-gray-900"
        href="/docs/upgrading-to-v2"
        ><span aria-hidden="true" class="mr-2"
          ><font style="vertical-align: inherit"
            ><font style="vertical-align: inherit">←</font></font
          ></span
        ><font style="vertical-align: inherit"
          ><font style="vertical-align: inherit">升级指南</font></font
        ></a
      ><a
        class="flex text-right ml-auto transition-colors duration-200 hover:text-gray-900"
        href="/docs/optimizing-for-production"
        ><font style="vertical-align: inherit"
          ><font style="vertical-align: inherit">优化生产</font></font
        ><span aria-hidden="true" class="ml-2"
          ><font style="vertical-align: inherit"
            ><font style="vertical-align: inherit">→</font></font
          ></span
        ></a
      >
      <tv-svg path="search"></tv-svg>
    </div>
  </tv-tailwind>
</template>

<script lang="ts">
// @ts-ignore
import Headroom from "headroom.js";
import Viewer from "viewerjs";
import { defineComponent, provide, ref, onMounted, reactive } from "vue";
import { ViewerSymbol, ThemeSymbolRef } from "./utils/constant";
// import TvSvg from "./components/TvSvg.vue";
import V3Viewer from "./components/V3Viewer.vue";
import TvTailwind from "./layouts/TvTailwind.vue";
export default defineComponent({
  name: "App",
  components: {
    // TvSvg,
    [TvTailwind.name]: TvTailwind,
    [V3Viewer.name]: V3Viewer,
  },
  setup() {
    provide(ThemeSymbolRef, ref("dark"));
    provide(ViewerSymbol, ref<Viewer | null>(null));

    // 顺序是先挂载子组件，因此App组件是在最后挂载的，必定能找到oHeader
    onMounted(() => {
      /**
       * 智能显示隐藏导航栏:
       * http://www.ilxtx.com/auto-hide-navbar.html
       * https://boke112.com/post/3476.html
       * [cdn](https://npmcdn.com/headroom.js@0.9.3/dist/headroom.min.js)
       */
      const oHeader = document.querySelector("#nav-headroom-scroll");

      const headroom = new Headroom(oHeader, {
        // 在元素没有固定之前，垂直方向的偏移量（以px为单位）-- 往下滚205px才会触发
        offset: 205,
        // scroll tolerance in px before state changes
        tolerance: 5,
        classes: {
          // 当元素初始化后所设置的class
          initial: "headroom-animated",
          // 向上滚动时设置的class ["slideDown", "swingInX", "flipInX", "bounceInDown"]
          pinned: "slideDown",
          // 向下滚动时所设置的class ["slideUp", "swingOutX", "flipOutX", "bounceOutUp"]
          unpinned: "slideUp",
        },
      });
      headroom.init();

      // to destroy
      // headroom.destroy();
    });

    const imgs = reactive([
      {
        src: "https://picsum.photos/id/55/346/216",
        source: "https://picsum.photos/id/55/1440/900",
      },
      {
        src: "https://picsum.photos/id/56/346/216",
        source: "https://picsum.photos/id/56/1440/900",
      },
      {
        src: "https://picsum.photos/id/57/346/216",
        source: "https://picsum.photos/id/57/1440/900",
      },
      {
        src: "https://picsum.photos/id/58/346/216",
        source: "https://picsum.photos/id/58/1440/900",
      },
    ]);
    const handleViewerInit = (e: any) => {
      console.log(e.options);
    };
    return { imgs, handleViewerInit };
  },
});
</script>

<style></style>
